<template>
    <div class="main content">
      <carousel></carousel>
      <el-row :gutter="20">
        <el-col :span="8">
           <contact></contact>
        </el-col>
        <el-col :span="16">
            <intro></intro>
            <div style="margin-top: 20px;"></div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content">
                  <case-card title="成功案例" :list="successList"></case-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content">
                  <case-card title="经验分享" :list="shareList"></case-card>
                </div>
              </el-col>
            </el-row>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import Contact from '../Contact/Index'
import Intro from '../Intro/Index'
import CaseCard from '../../Component/CaseCard/Index'
import Carousel from '../Carousel/Index'
import { mapState } from 'vuex'
export default {
    name: 'MainContent',
    components: {
        Contact,
        Intro,
        CaseCard,
        Carousel
    },
    computed: {
        ...mapState({
            shareList: state => state.index.shareList,
            successList: state => state.index.successList
        })
    }
}
</script>

<style scoped>
  .main{
    min-height: 60vh;
  }
</style>
